<template>
  <div class="app-container">
    <menu-buttons></menu-buttons>
    <el-button  @click="openFile">打开文件</el-button>
    {{filePath}}

    <el-button @click="readFile">读取文件</el-button>
    {{fileData}}

    <el-button @click="writeFile">写入文件</el-button>

    <el-menu mode="horizontal" default-active="2" @select="menuSelect">
      <el-menu-item index="1"  >
        <el-icon><location /></el-icon>
        <template #title>整体总览</template>
      </el-menu-item>
      <el-menu-item index="2"  >
        <el-icon><AlarmClock /></el-icon>
        <template #title>每日数据</template>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><User /></el-icon>
        <template #title>用户配置</template>
      </el-menu-item>
    </el-menu>

  </div>
</template>

<script setup>

import MenuButtons from "@/components/menuButtons.vue";
import {electronStoreGet, electronStoreSet, ipcSendSync} from "@/api/appEvent";


const filePath = ref("");
//从electronStore中获取文件路径，如果未获取到则提示错误
onMounted(() => {
  filePath.value = electronStoreGet("FitTrackFilePath")

});


function openFile() {

  filePath.value =ipcSendSync("dialog:openFile", "")

  electronStoreSet("FitTrackFilePath", filePath.value)
}

const fileData = ref(null);
function readFile() {
  fileData.value = ipcSendSync("file:readFile", filePath.value)
}

function writeFile() {
  fileData.value.test = "test"
  ipcSendSync("file:writeFile", JSON.stringify(fileData.value))
}


function menuSelect(index){
  console.log(index)
}


</script>

<style scoped lang="scss">
$imageBase: "@/assets/images/";



.app-container {
  background: url($imageBase + "appBg.png") center bottom;
  background-size: 100% auto;
}


</style>
